<template>
  <view class="container">
    <!-- 门店列表 -->
    <view class="store-list">
      <view
        v-for="store in stores"
        :key="store.id"
        class="store-card"
        :class="{ disabled: store.status === 0 }"
        @click="store.status === 1 && selectStore(store)"
      >
        <image
          class="store-img"
          :src="store.img || '/static/images/store-default.jpg'"
          mode="aspectFill"
        />
        <view class="store-info">
          <view class="store-top">
            <text class="store-name">{{ store.name }}</text>
            <text
              class="store-status"
              :class="store.status === 1 ? 'open' : 'closed'"
            >
              {{ store.status === 1 ? '营业中' : '未营业' }}
            </text>
          </view>
          <text class="store-desc">{{ store.address || '暂无地址' }}</text>
        </view>
      </view>
    </view>

    <!-- 服务列表 -->
    <view v-if="services.length" class="service-list">
      <text class="section-title">可选服务</text>
      <view
        v-for="svc in services"
        :key="svc.id"
        class="service-card"
        @click="goReservation(svc)"
      >
        <view class="service-info">
          <text class="service-name">{{ svc.name }}</text>
          <text class="service-desc">{{ svc.description || '优质宠物服务' }}</text>
        </view>
        <view class="service-price-box">
          <text class="service-price">￥{{ svc.price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      stores: [],
      services: [],
      selectedStore: null
    }
  },
  onShow() {
    this.loadStores()
  },
  methods: {
    async loadStores() {
      const res = await request({ url: '/store/list', method: 'GET' })
      if (res.code === 200) {
        this.stores = res.data || []
      }
    },
    async selectStore(store) {
      this.selectedStore = store
      const res = await request({ url: `/store-service/list/${store.id}`, method: 'GET' })
      if (res.code === 200) {
        this.services = res.data || []
      }
    },
   goReservation(service) {
  if (!this.selectedStore) {
    uni.showToast({ title: '请先选择门店', icon: 'none' })
    return
  }
  // 存储参数
  uni.setStorageSync('reservationParams', {
    storeId: this.selectedStore.id,
    serviceId: service.id
  })

  // 跳转到 tabBar 页面
  uni.navigateTo({
  url: '/pages/order/order'
})

}

  }
}
</script>

<style scoped>
.container {
  padding: 24rpx;
  background: #f9f9f9;
  min-height: 100vh;
}

/* 门店卡片 */
.store-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.store-card {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 24rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
  transition: transform 0.2s;
}
.store-card:active {
  transform: scale(0.98);
}
.store-card.disabled {
  opacity: 0.4;
}
.store-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 20rpx;
  margin-right: 24rpx;
}
.store-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.store-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store-name {
  font-size: 34rpx;
  font-weight: 600;
  color: #111;
}
.store-status {
  font-size: 26rpx;
  font-weight: 500;
}
.store-status.open {
  color: #34c759; /* Apple 绿 */
}
.store-status.closed {
  color: #aaa;
}
.store-desc {
  font-size: 26rpx;
  color: #666;
  margin-top: 6rpx;
}

/* 服务列表 */
.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin: 40rpx 0 20rpx;
  color: #111;
}
.service-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.service-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}
.service-card:active {
  transform: scale(0.98);
}
.service-info {
  display: flex;
  flex-direction: column;
}
.service-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #111;
}
.service-desc {
  font-size: 24rpx;
  color: #888;
  margin-top: 6rpx;
}
.service-price-box {
  display: flex;
  align-items: center;
}
.service-price {
  font-size: 30rpx;
  font-weight: 600;
  color: #ff3b30; /* Apple 红 */
}
</style>
